<template>
  <div class="home-page">
    <el-row :gutter="20" style="margin:10px;">
      <el-col :span="6">
        <div class="data-board">
          <el-card
            style="height: 360px; border-top: 5px solid #9709F7; border-radius: 10px;"
          >
            <img
              src="https://res.shiguangkey.com/promotion/2020/9/24/753026c329/pie.png"
              alt=""
              style="width: 50px; height: 54px;"
            />
            <h1>APIs</h1>
            <h5>
              该项目API总数：<span style="color:#9709F7; font-size:13px">{{
                interfaces.total
              }}</span>
            </h5>
            <h5>
              通过：<span style="">{{ interfaces.passed }}</span>
            </h5>
            <h5>
              失败：<span style="">{{ interfaces.failed }}</span>
            </h5>
            <h5>
              未知：<span style="">{{ interfaces.unknown }}</span>
            </h5>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="case-board">
          <el-card
            style="height:360px; border-top: 5px solid #ffcc66; border-radius: 10px;"
          >
            <img
              src="https://res.shiguangkey.com/promotion/2020/9/24/89737d9e50/chain.png"
              alt=""
              style="width: 50px; height: 54px;"
            />
            <h1>CASEs</h1>
            <h5>
              该项目用例总数：<span style="color:red">{{ cases.total }}</span>
            </h5>
            <h5>
              通过：<span style="">{{ cases.passed }}</span>
            </h5>
            <h5>
              失败：<span style="">{{ cases.failed }}</span>
            </h5>
            <h5>
              未知：<span style="">{{ cases.unknown }}</span>
            </h5>
            <h5>
              执行次数：<span style="">{{ cases.perform }}</span>
            </h5>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="suite-board">
          <el-card
            style="height: 360px; border-top: 5px solid #ff99ff; border-radius: 10px;"
          >
            <img
              src="https://res.shiguangkey.com/promotion/2020/9/24/6a22303eb8/s.png"
              alt=""
              style="width:50px; height:54px;"
            />
            <h1>SUITEs</h1>
            <h5>
              该项目套件总数：<span style="color:blue">{{ suites.total }}</span>
            </h5>
            <h5>
              通过：<span style="">{{ suites.passed }}</span>
            </h5>
            <h5>
              失败：<span style="">{{ suites.failed }}</span>
            </h5>
            <h5>
              未知：<span style="">{{ suites.unknown }}</span>
            </h5>
            <h5>
              执行次数：<span style="">{{ suites.perform }}</span>
            </h5>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="user-board">
          <el-card
            style="height: 360px;  border-top: 5px solid #50F3D2; border-radius: 10px;"
          >
            <img
              src="https://res.shiguangkey.com/promotion/2020/9/24/af62dd94bd/friend.png"
              alt=""
              style="width:50px; height:54px;"
            />
            <h1>USERs</h1>
            <h5>
              该项目用户总数：
              <span style="color:#50F3D2;">{{ users.total }}</span>
            </h5>
            <h5>
              <p>项目成员：</p>
              <div style="width:400px; ">
                <el-tag
                  v-for="item in users.admin"
                  :key="item"
                  style="margin:6px;"
                  effect="plain"
                  size="medium"
                  >{{ item.nickname }}</el-tag
                >
              </div>
            </h5>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-empty
      description="Tips：
环境变量/全局变量数据引用语法：$变量名
举个栗子：$account
断言或提取变量语法：content.****
举个栗子：content.data.list.1.nickname
注意：字典直接使用 （.token）取值，列表使用（.1）代表取值第一个"
    >
    </el-empty>
  </div>
</template>

<script>
import { getData, getUser } from '@/api/board'

export default {
  name: 'Board',
  props: {},
  components: {},
  data () {
    return {
      interfaces: {
        total: 0,
        passed: 0,
        failed: 0,
        unknown: 0
      },
      cases: {
        total: 0,
        passed: 0,
        failed: 0,
        unknown: 0,
        perform: 0
      },
      suites: {
        total: 0,
        passed: 0,
        failed: 0,
        unknown: 0,
        perform: 0
      },
      users: {
        total: 0
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getData()
    this.getUser()
  },
  mounted () {},
  methods: {
    getData () {
      getData({
        project_id: parseInt(window.localStorage.getItem('projectId'))
      })
        .then(res => {
          if (res.data.code == 200) {
            const result = res.data.result
            this.interfaces = result.interface
            this.cases = result.case
            this.suites = result.suite
          } else {
            this.$messgae.error('看板数据加载失败')
          }
        })
        .catch(err => {
          console.log('加载数据失败：' + err)
        })
    },

    getUser () {
      getUser({
        project_id: parseInt(window.localStorage.getItem('projectId'))
      })
        .then(res => {
          if (res.data.code == 200) {
            const result = res.data.result
            this.users = result
          }
        })
        .catch()
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
